<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
    <style>
        [v-cloak] {
            display: none;
        }

        .box li {
            width: 40px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            float: left;
            border: 1px solid red;
            list-style: none;
        }

        .box li.active {
            background: green;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 
            v-text +  
            v-html +
            {}} +  
            v-pre  + 
            v-cloak  + 
            v-model +
            v-on:ckick[@click]
            v-bind:class=''==:class=''
            v-if &  v-show

            v-for
         -->

        <ul @click="handler(111, $event)">
            <li>{{msg1}}</li>
            <li v-text='msg2'>{{msg1}}========</li>
            <li v-html='msg3'>{{msg1}}========</li>
            <li v-pre>{{msg1}}========</li>
            <li v-cloak>{{msg5}}</li>
            <hr>
            <li @click.stop.once='lis'>{{msg6}}</li>


        </ul>

        <hr>

        <ul class="box">
            this.f0=true
            <li @click='aa(index)' v-for="(item, index) in list" :key="index" :class="index==f0?'active':''">{{item}}
            </li>
        </ul>

        <hr>

        <input type="text" name="" id="" v-model.number="a1">

        <select name="" id="" v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="" id="" v-model.number='a2'>
        <input type="button" value='=' @click='sum'>
        <input type="text" name="" id="" placeholder="计算的结果" v-model.number='total'>


    </div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: '我是插值表达式',
                msg2: '我是v-text',
                msg3: '我是v-html====<span>我是v-html解析的标签</span>=======存在不安全',
                msg4: '我是v-pre',
                msg5: '我是v-cloak',
                msg6: '绑定点击事件',

                list: [
                    'web', 'java', 'python', 'ui'
                ],
                f0: 0,
                opt: '+',
                a1: '',
                a2: '',
                total: ''

            },
            methods: {
                msg() {

                },
                lis() {
                    // this.msg()
                    this.msg6 = '我是点击后的msg6'
                },
                handler(a, b) {
                    //alert('我是ul的事件')
                    console.log(a, b);

                },
                aa(i) {
                    console.log(i, 888);

                    this.f0 = i
                },
                sum() {
                    // this.total=this.a1+this.a2
                    switch (this.opt) {
                        case '+':
                            this.total = this.a1 + this.a2
                            break;
                        case '-':
                            this.total = this.a1 - this.a2
                            break;
                        case '*':
                            this.total = this.a1 * this.a2
                            break;
                        case '/':
                            this.total = this.a1 / this.a2
                            break;
                    }
                }
            }
        });
    </script>
</body>

</html>